<template>
	<view>
		<view class="top"></view>
		<uni-card>
			<cc-pickerView leftTitle="是否离开武汉" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
				:value="value" :range="range"></cc-pickerView>
			<view class="hr"></view>
			<cc-pickerView leftTitle="请假类型" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
				:value="value" :range="range"></cc-pickerView>
		</uni-card>
		<uni-card>
			<uni-row>
				<uni-col :span="19"><text class="target">请填写离校目的地的地址(非出发地) </text></uni-col>
				<uni-col :span="5">
					<button @click="addBtn" class="uni-button" size="mini" type="default">
						<image class="uni-image" src="../../static/Plus.png" mode=""></image>
						<view style="display: inline";>
							<text class="addbtn">添加</text>
						</view>
					</button>
				</uni-col>
			</uni-row>
			<view v-for="(item,index) in arr" style=";margin-bottom: 10rpx;">
				<image @click="delBtn(index)" src="../../static/del.png" class="uni-image del" mode=""></image>
				<uni-card style="margin: 0px">
					<cc-pickerView leftTitle="请假类型" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
						:value="value" :range="range"></cc-pickerView>
					<view class="hr"></view>
					*详细地址 <br>
					<textarea placeholder="请详细填写地址信息，如小区名门牌号等" auto-height />
				</uni-card>
			</view>
		</uni-card>
		<uni-card>
			<view class="">
				<text class="head">附件</text>
			</view>
			<view class="content">
				病假的同学请上传医院证明，其余请假同学请上传其他证明材料，图片单张不超过2M
			</view>
			<view>
				<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
			</view>
		</uni-card>
		<uni-card>
			
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let value = ref(1)
	let range = ref(['是', '否', '其他'])
	let towardPickerChange = function(e) {
		this.value = e.target.value; // 切换的值的索引值
	}
	
	let arr = ref([{
		area: '',
		address: ''
	}])
	let addBtn = function(){
		arr.value.push({
			area: '',
			address: ''
		})
	}
	let delBtn = function(){
		arr.value.splice(index, 1)
	}
</script>

<style scoped>
	.top {
		position: absolute;
		top: -15px;
		height: 119px;
		width: 100%;
		background: linear-gradient(180.00deg, #2264ff 0%, #f5f5f5 100%);
	}

	.uni-card {
		border-radius: 24rpx;
	}

	.hr {
		border-top: 0.5px solid #DBDBDB;
	}
	.del{
		position: absolute;
		left: -8px;
		z-index: 999;
		top: 47px;
	}
	.target {
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 14px;
		text-align: left;
		color: #000;
		position: relative;
		top: 2px;
	}

	.uni-button {
		border-radius: 14px;
		background: #fff;
		border: 1px solid #2264ff;
		width: 60px;
		height: 28px;
		padding: 0px;
		font-size: 12px;
		text-align: center;
		color: #2264ff;
	}

	.uni-image {
		width: 16px;
		height: 16px;
		margin-top: 10rpx;
	}

	.addbtn {
		position: relative;
		top: -3px;
	}
	.mrg0{
		margin: 0px;
	}
	.head{
		color: #1a1a1a;
		font-size: 14px;
		font-face: PingFang SC;
		font-weight: 400;
		letter-spacing: 0;
	}
	.content{
		color: #b3b3b3;
		font-size: 12px;
		font-face: "PingFang SC";
		font-weight: 400;
		letter-spacing: 0;
	}
</style>